import React, { PureComponent } from 'react'
import { Icon, Spin, Button, message } from 'antd'
import PropTypes from 'prop-types'

import Style from './category.css'

class category extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.next = this.next.bind(this)
  }

  selectFirstCategory (item, index) {
    this.props.getChildCategory(item.id)
    this.setState({
      firstName: item.name,
      firstCode: item.code,
      secondName: '',
      secondCode: null,
      firstIndex: index
    })
  }

  selectSecondCategory (item, index) {
    this.setState({
      secondName: item.name,
      secondCode: item.code,
      secondIndex: index
    })
  }

  next () {
    const { firstCode, secondCode, firstName, secondName, firstIndex, secondIndex } = this.state
    if (!firstCode || !secondCode) {
      message.warning('请选择类别')
      return
    }
    this.props.writeInfo({
      category: {
        firstCode,
        secondCode,
        firstName,
        secondName,
        categoryCode: `${firstCode}:${secondCode}`,
        codePath: `${firstName}:${secondName}`,
        firstIndex,
        secondIndex
      }
    })
  }

  componentDidMount () {
    const { category } = this.props
    if (category) {
      this.setState({
        firstCode: category.firstCode,
        secondCode: category.secondCode,
        firstName: category.firstName,
        secondName: category.secondName,
        firstIndex: category.firstIndex,
        secondIndex: category.secondIndex
      })
    }
  }

  render () {
    const { firstName, secondName, firstIndex, secondIndex } = this.state
    const { categoryOptions, categoryChildOptions } = this.props
    return (
      <div>
        <div className={Style['categoty-container']}>
          <div className={Style['first-container']}>
            <div className={Style['current']}>
              当前选择的商品类别：{firstName && (firstName + ' > ' + secondName)}
            </div>
            <div className={Style['first']}>
              <div className={Style['title']}>选择商品一级类目</div>
              <div className={Style['category-item-container']}>
                {
                  categoryOptions.map((item, index) => <div key={index} className={`${Style['category-item']} ${index === firstIndex && Style['active']}`} onClick={() => this.selectFirstCategory(item, index)}>
                    {item.name}
                    {/* <Icon type='right' /> */}
                  </div>)
                }
              </div>
            </div>
          </div>
          <Icon type='arrow-right' style={{ margin: '200px 56px 0 56px', fontSize: '20px' }} />
          <div className={Style['second']}>
            <div className={Style['title']}>选择商品二级类目</div>
            <Spin spinning={false}>
              <div className={Style['category-item-container']}>
                {
                  categoryChildOptions.map((item, index) => <div key={index} className={`${Style['category-item']} ${index === secondIndex && Style['active']}`} onClick={() => this.selectSecondCategory(item, index)}>
                    {item.name}
                    {/* <Icon type='right' /> */}
                  </div>)
                }
              </div>
            </Spin>
          </div>
        </div>
        <div className={Style['btn-container']}>
          <Button type='primary' onClick={this.next}>
            下一步，填写商品信息
          </Button>
        </div>
      </div>
    )
  }
}

category.propTypes = {
  writeInfo: PropTypes.func,
  categoryOptions: PropTypes.any,
  categoryChildOptions: PropTypes.any,
  getChildCategory: PropTypes.any,
  category: PropTypes.any
}

export default category
